<template>
    <div class="risk-deviation-monitor">
        <el-tabs v-model="activeKey" type="card" closable @tab-remove="removeTab">
            <el-tab-pane name="monitor">
                <span slot="label">实时风险监控偏离</span>
                <RiskDeviationQuery @handelOperate="handelOperate"></RiskDeviationQuery>
            </el-tab-pane>

            <el-tab-pane v-for="item in panes" :key="item.key" :name="item.key">
                <span slot="label"><i class="el-icon-discover"></i>{{ item.title }} </span>
                <InstReportDetail :staticResult="item.value" :history="item.history" style="padding:20px"></InstReportDetail>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import InstReportDetail from '../risk-time/invest-manage/Inst-report-detail.vue';
import RiskDeviationQuery from './risk-deviation-monitor/risk-deviation-query.vue';
@Component({
    name: 'InstructionQuery',
    components: {
        RiskDeviationQuery,
        InstReportDetail,
    },
})
export default class RiskDeviationMonitor extends Vue {
    private activeKey: string = 'monitor';

    private panes: any[] = []; // 所有tabs标签页

    private staticResult: any = {}; // 当前指令结果数据

    // 指令结果详情
    private handelOperate({ record, history, clickRecord }): void {
        let parentRecord = clickRecord;
        let key = String(parentRecord?.instructionNo + '-' + record?.entryCode);
        for (let i = 0; i < this.panes.length; i++) {
            if (this.panes[i].key === key) {
                this.activeKey = key;
                return;
            }
        }
        this.panes.push({ title: key, key: key, value: JSON.parse(JSON.stringify(record || {})), history: history });
        this.activeKey = key;
    }

    // 移除tabs
    private removeTab(targetKey: string): void {
        let lastIndex;
        this.panes.forEach((pane, i) => {
            if (pane.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        this.panes = this.panes.filter(pane => pane.key !== targetKey);
        if (this.panes.length && this.activeKey === targetKey) {
            if (lastIndex >= 0) {
                this.activeKey = this.panes[lastIndex].key;
            } else {
                this.activeKey = this.panes[0].key;
            }
        }
        if (this.panes.length === 0) {
            this.activeKey = 'monitor';
        }
    }
}
</script>
<style lang="scss" scoped>
.risk-deviation-monitor {
    min-width: 1200px;
    background: #fff;
    padding-top: 10px;
    overflow: auto;
    height: 100vh;
    /deep/ .el-tabs .el-tabs__nav .el-tabs__item {
        line-height: 34px;
        padding: 0 25px;
    }
    /deep/ .el-tabs .el-tabs__nav .el-tabs__item span {
        border-right: 0px solid #fff;
    }
    /deep/ .el-tabs .el-tabs__nav .el-tabs__item:nth-child(1) .el-icon-close {
        display: none;
    }
}
</style>
